<template>
  <!-- 展示单个歌单详细内容 -->
  <div id="play_list">
    <LeftContent
      @add-play-song="addPlaySong"
      @add-all-song-to-music-list="addAllSongToMusicList"
    ></LeftContent>
    <RightNav @change-page="changePage"></RightNav>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  computed,
  provide,
  reactive,
  ref,
} from "vue";
import { mapGetters, useStore } from "vuex";
import LeftContent from "@/components/playlistChild/LeftContent.vue";
import RightNav from "@/components/playlistChild/RightNav.vue";

import { handleSong, handleComment } from "@/network/playlist/playlist.js";

export default defineComponent({
  name: "PlayList",
  components: {
    LeftContent,
    RightNav,
  },
  setup() {
    const store = useStore();
    // 获取单个歌单的信息
    let songListDetail = computed(
      mapGetters(["getSongListDetail"]).getSongListDetail.bind({
        $store: store,
      })
    );
    let data = reactive({
      songParams: {
        // 歌单歌曲请求
        offset: 0,
        limit: 0,
        id: 0,
      },
      // 评论请求参数
      commentParams: {
        offset: 0,
        limit: 50,
        id: 0,
      },
    });
    let songs = ref([]);
    let comments = ref({});
    provide("songs", songs);
    provide("comments", comments);

    onMounted(() => {
      data.songParams.limit = songListDetail.trackCount;
      data.songParams.id = songListDetail.value.id;
      data.commentParams.id = songListDetail.value.id;
      getSongs(data.songParams);
      getComment(data.commentParams);
    });

    // 获取歌单歌曲请求
    let getSongs = async (params) => {
      let res = await handleSong(params);
      songs.value = res.songs;
    };

    // 获取歌单评论请求
    let getComment = async (params) => {
      let res = await handleComment(params);
      if (res.hotComments) {
        comments.value.hotComments = res.hotComments;
      }
      comments.value.comments = res.comments;
      comments.value.total = res.total;
    };

    // 子组件评论区域改变页码事件
    let changePage = (param) => {
      data.commentParams.offset = (param.page - 1) * 50;
      getComment(data.commentParams);
      document.documentElement.scrollTop = param.height;
    };

    // 双击播放歌曲事件
    let addPlaySong = (item) => {
      store.dispatch("addPlaySong", item);
    };

    // 添加所有的歌曲到播放列表
    let addAllSongToMusicList = () => {
      store.dispatch("addAllSongToMusicList", songs.value);
    };

    return { changePage, addPlaySong, addAllSongToMusicList };
  },
});
</script>
<style scoped>
#play_list {
  width: 70%;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  background-color: #fff;
}
</style>
